import React, { ReactElement, useEffect, useState } from 'react'
import { Button, Row, Input, Card, Tag, Col } from 'antd'
import styles from './HeroCard.less'
import SkinUpload from './upload/skinUpload'
import { connect } from 'umi'

const { TextArea } = Input;

interface Props {
    skins: Array<any>,
    addSkin: Function,
    delSkinItem: Function,
    setSkinItem: Function
}


function Skin({ skins, addSkin, delSkinItem, setSkinItem }: Props): ReactElement {
    return (
        <div>
            <Button className={styles.mb15} onClick={() => {
                addSkin()
            }} type="primary"> + 添加皮肤</Button>
            {/* img   name */}
            <Row>
                {
                    skins.map((item, index) => {
                        return <Col key = { index } span={12}>
                            <Card title={<Tag color="processing">皮肤{ index + 1}</Tag>}>
                                <div className={styles.flex}>
                                    <span>
                                        皮肤名称:
                                    </span>
                                    <div>
                                        <Input value={ item.name } onChange={(ev) => {
                                            setSkinItem('name', index, ev.target.value)
                                        }}/>
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        皮肤图片:
                                    </span>
                                    <div>
                                        <SkinUpload index = { index } />
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        <Button type="primary" onClick={() => {
                                            delSkinItem(index)
                                        }} danger>删除皮肤</Button>
                                    </span>
                                </div>
                            </Card>
                        </Col>
                    })
                }
            </Row>
        </div>
    )
}

// skins

export default connect((state: any) => {
    const { heroCard } = state
    const { skins } = heroCard
    return {
        skins
    }
}, (dispatch) => {
    return {
        addSkin() {
            dispatch({ type: "heroCard/addSkin" })
        },
        delSkinItem(index: number) {
            dispatch({ type: "heroCard/delSkin", index })
        },
        setSkinItem(com: string, index: number, value: string) {
            dispatch({ type: "heroCard/setSkinItem", com, index, value })
        }
    }
})(Skin)
